<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue 表格 rowspan 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入 SheetJS -->
    <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 8px 12px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="toolbar">
            <button @click="exportExcel">导出到 Excel</button>
        </div>
        <table>
            <tr>
                <th>类别</th>
                <th>区域</th>
                <th>信息详情</th>
            </tr>
            <!-- 更高级的逻辑（比如折叠、分组显示、分页） -->
            <template v-for="(group, groupIndex) in dataList" :key="groupIndex">
                <tr v-for="(info, infoIndex) in group.infoList" :key="infoIndex">
                    <!-- 仅在 infoList 的第一项时显示 rowspan 单元格 -->
                    <td v-if="infoIndex === 0" :rowspan="group.infoList.length">{{ group.category }}</td>
                    <td v-if="infoIndex === 0" :rowspan="group.infoList.length">{{ group.region }}</td>
                    <td>{{ info }}</td>
                </tr>
            </template>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                dataList: [
                    {
                        category: '企业信息归集情况',
                        region: '项目信息归集情况',
                        infoList: [
                            '评级信息归集情况',
                            '业务系统中企业家数量(家)',
                            '信用系统归集企业数量'
                        ]
                    },
                    {
                        category: '企业信息归集情况',
                        region: '项目信息归集情况',
                        infoList: [
                            '评级信息归集情况',
                            '业务系统中企业家数量(家)',
                            '信用系统归集企业数量'
                        ]
                    },
                    {
                        category: '企业信息归集情况',
                        region: '项目信息归集情况',
                        infoList: [
                            '评级信息归集情况',
                            '业务系统中企业家数量(家)',
                            '信用系统归集企业数量'
                        ]
                    },
                    {
                        category: '企业信息归集情况',
                        region: '项目信息归集情况',
                        infoList: [
                            '评级信息归集情况',
                            '业务系统中企业家数量(家)',
                            '信用系统归集企业数量'
                        ]
                    },
                    {
                        category: '企业信息归集情况',
                        region: '项目信息归集情况',
                        infoList: [
                            '评级信息归集情况',
                            '业务系统中企业家数量(家)',
                            '信用系统归集企业数量'
                        ]
                    },
                    {
                        category: '企业信息归集情况',
                        region: '项目信息归集情况',
                        infoList: [
                            '评级信息归集情况',
                            '业务系统中企业家数量(家)',
                            '信用系统归集企业数量'
                        ]
                    }
                ]
            },
            /**
             * 
             */
            methods: {
                // 缺失 xlxs-style 样式不生效
                exportExcel() {
                    // 1. 构造一个空的 worksheet 对象
                    const ws = {};

                    // 合并区域数组（如果你之前已经在用 merge 功能，可以沿用）
                    const merges = [];

                    // 示例头部
                    const headers = ['类别', '区域', '信息详情'];
                    headers.forEach((h, col) => {
                        const cellRef = XLSX.utils.encode_cell({ r: 0, c: col });
                        ws[cellRef] = {
                            v: h,
                            s: {
                                alignment: { horizontal: 'center', vertical: 'center' },
                                font: { bold: true }        // 比如把表头加粗
                            }
                        };
                    });

                    // 从第 1 行开始写数据
                    let row = 1;
                    this.dataList.forEach(group => {
                        const startRow = row;
                        group.infoList.forEach(info => {
                            // 类别列
                            let refA = XLSX.utils.encode_cell({ r: row, c: 0 });
                            ws[refA] = {
                                v: group.category,
                                s: { alignment: { horizontal: 'center', vertical: 'center' } }
                            };

                            // 区域列
                            let refB = XLSX.utils.encode_cell({ r: row, c: 1 });
                            ws[refB] = {
                                v: group.region,
                                s: { alignment: { horizontal: 'center', vertical: 'center' } }
                            };

                            // 信息详情列
                            let refC = XLSX.utils.encode_cell({ r: row, c: 2 });
                            ws[refC] = {
                                v: info,
                                s: { alignment: { horizontal: 'center', vertical: 'center' } }
                            };

                            row++;
                        });
                        // 记录合并范围（同前文）
                        merges.push({ s: { r: startRow, c: 0 }, e: { r: row - 1, c: 0 } });
                        merges.push({ s: { r: startRow, c: 1 }, e: { r: row - 1, c: 1 } });
                    });

                    // 定义 sheet 范围
                    ws['!ref'] = XLSX.utils.encode_range({
                        s: { r: 0, c: 0 },
                        e: { r: row - 1, c: headers.length - 1 }
                    });
                    ws['!merges'] = merges;

                    // 2. 写入 workbook 并导出，开启 cellStyles
                    const wb = XLSX.utils.book_new();
                    XLSX.utils.book_append_sheet(wb, ws, '导出数据');
                    XLSX.writeFile(wb, '导出结果.xlsx', { bookType: 'xlsx', cellStyles: true });
                }

            }
        });
    </script>
</body>

</html>